<template>
  <!--  近2周记录-->
  <div class="container-big">
    <div class="content-big">
      <div class="content-left">
        <div class="formGroup">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="130px" class="">
            <el-button type="primary" size="small" @click="handerAddGroup"><i class="el-icon-plus"></i>新建标签组</el-button>
            <el-form-item prop="userName2">
              <div class="search">
                <el-input v-model="queryParams.userName1" placeholder="搜索标签组" clearable/>
                <el-button icon="el-icon-search" size="small" @click="handleQuery"></el-button>
              </div>

            </el-form-item>
          </el-form>
        </div>
        <div class="content-item">
          <div class="content-top">
            <div class="title">产品线一</div>
            <div class="mgt">
              <el-switch
                v-model="value"
                active-color="#13ce66">
              </el-switch>
            </div>
          </div>
          <div class="label-list">
            <span>未入常规群</span>,
            <span>未入常规群</span>
          </div>
          <div class="content-bottom">
            <div class="content-id">id:1106164</div>
            <div class="content-type">类型：默认</div>
          </div>
        </div>
        <div class="content-item active">
          <div class="content-top">
            <div class="title">私聊活跃程度</div>
            <div class="mgt">
              <el-switch
                v-model="value"
                active-color="#13ce66">
              </el-switch>
            </div>
          </div>
          <div class="label-list">
            <div class="red">未配置规则</div>
            <div class="userList">未选择企微号</div>
          </div>
          <div class="content-bottom">
            <div class="content-id">id:1106164</div>
            <div class="content-type">2023-11-03 09:46</div>
          </div>
        </div>
      </div>
      <div class="content-right" >
        <ul class="table-list">
          <li :class="active==index?`active`:``" v-for="(item,index) in tablist" @click="getActive(index)">{{ item.label }}</li>
        </ul>
        <div class="right-big">
          <template v-if="active==0">
            <el-form
              ref="form"
              :model="form"
              :rules="rules"
              label-width="120px"
              label-position="left"
            >
              <div class="content-item">
                <el-form-item label="生效企微号：" prop="name">
                  <el-button size="small" plain @click="getSelectUser">添加选择</el-button>
                  <div class="user-images">
                    <span>已选</span>
                    <div class="img-li">
                      <img src="@/assets/images/profile.jpg"/>
                      <img src="@/assets/images/profile.jpg"/>
                    </div>
                    <div><i class="el-icon-more"></i></div>
                    <div class="number">等5个</div>
                  </div>
                </el-form-item>
                <el-form-item label="标签变更规则：" prop="name">
                  <el-checkbox v-model="checked"></el-checkbox>
                  客户标签自动变更时移除分组内已打上的其他标签
                </el-form-item>
                <el-form-item label="标签规则：" prop="name">
                  <el-table
                    :data="tableDataList"
                    :max-height="tableHeight"
                    ref="companylabelList"
                  >
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column
                      :label="item.label"
                      :align="item.align?item.align:`center`"
                      v-for="(item, index) in tableColumns"
                      :key="index"
                      :prop="item.key"
                      :min-width="item.minWidth ? item.minWidth : ``"
                      :fixed="item.fixed ? item.fixed : false"
                      :show-overflow-tooltip="true"
                    >
                      <!--用于表格自定义-->
                      <template slot-scope="scope">
                        <div class="label-list" v-if="item.key=='label'">
                          <span>未入VIP群</span>
                        </div>
                        <div class="condition" v-else-if="item.key=='condition'">
                          <el-button type="primary" plain @click="handerAddCondition">添加条件</el-button>
                          <div class="condition-content">
                            <div class="label-big">
                              2024-03-27-2024-04-24，消费金额：大于等于1元，小于30元
                            </div>
                            <div class="label-btnBig">
                              <i class="el-icon-delete"></i>
                              <i class="el-icon-edit"></i>
                            </div>
                          </div>
                        </div>
                        <div v-else style="text-align: center">{{ scope.row[item.key] }}</div>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </div>
            </el-form>
            <div class="footer-btn" v-if="active==0">
              <el-button type="primary" @click="onSubmit('form')">保存配置</el-button>
            </div>
          </template>
<!--          标签变更记录-->
          <template v-if="active==1">
            <div class="recordTalbel">
              <el-table
                :data="recordDataList"
                ref="companylabelList"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  :label="item.label"
                  align="left"
                  v-for="(item, index) in recordTableColumns"
                  :key="index"
                  :prop="item.key"
                  :min-width="item.minWidth ? item.minWidth : ``"
                  :fixed="item.fixed ? item.fixed : false"
                  :show-overflow-tooltip="true"
                >
                  <!--用于表格自定义-->
                  <template slot-scope="scope">
                    <div v-if="item.key=='name'">
                      <div class="userInfo">
                        <img src="@/assets/images/profile.jpg"/>
                        <div class="name">小城红</div>
                        <div class="label">@志新</div>
                      </div>
                    </div>
                    <div class="label-list" v-else-if="item.key=='label'">
                      <label>自动打上：</label>
                      <span>未入VIP群</span>
                      <span>持续7天未发言</span>
                      <span>1000</span>
                    </div>
                    <div v-else-if="item.key=='code'">
                      <div class="userInfo">
                        <img src="@/assets/images/profile.jpg"/>
                        <div class="name">小城红</div>
                        <div class="label">@志新</div>
                      </div>
                    </div>
                    <div v-else>{{ scope.row[item.key] }}</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>

        </div>


      </div>

    </div>
    <!--    选择企微号-->
    <selectByUser v-if="showSelectByUser" :visableIf.sync="showSelectByUser"></selectByUser>
    <!--    选择条件消费规则-->
    <selectConsumptionRules v-if="showSelectConsumptionRules" :visableIf.sync="showSelectConsumptionRules"></selectConsumptionRules>
    <!--    新增标签组-->
    <addLabelGroup v-if="showAddLabelGroup" :visableIf.sync="showAddLabelGroup"></addLabelGroup>
  </div>
</template>

<script>
import {listUser, delUser,} from "@/api/system/user";
import MultipleSelect from "@/views/components/multipleSelect.vue";

export default {
  name: "customerValueLabel",
  components: {
    MultipleSelect,
    'selectByUser': () => import('@/views/customerOperationsMgt/circleFriendsMgt/selectByUser.vue'),//导出弹窗
    'selectConsumptionRules': () => import('./selectConsumptionRules.vue'),//选择条件消费规则设置
    'addLabelGroup': () => import('./addLabelGroup.vue'),//新增标签

  },
  data() {
    return {
      showSelectByUser: false,//选择企微号
      showSelectConsumptionRules: false,//选择条件消费规则设置
      showAddLabelGroup: false,//新增标签组
      value: null,
      checked: false,

      form: {
        basicInfo: {
          taskName: null,//任务名称
          groupInfo: null,//分组信息
          enterpriseInfo: {
            //企微号信息
            ids: [],//选择的人员
            useType: 1,//客户范围
            condition: [{
              qwLabel: null,//企微标签
            }]
          }
        }
      },
      tablist: [
        {
          value: 1,
          label: '规则设置',
        },
        {
          value: 2,
          label: '标签变更记录',
        },
      ],
      active: 0,
      visible: false,

      dialogType: 'add',
      showExportPage: false,//导出
      tableHeight: 600,
      tableColumns: [
        {key: 'label', label: `标签名称`, visible: true, minWidth: 150, fixed: false, align: 'left'},
        {key: 'condition', label: `条件`, visible: true, minWidth: 400, fixed: false, align: 'center'},
      ],
      recordDataList: [],
      recordHeight: 600,
      recordTableColumns: [
        {key: 'name', label: `客户`, visible: true, minWidth: 150, fixed: true},
        {key: 'label', label: `标签`, visible: true, minWidth: 150, fixed: false},
        {key: 'code', label: `所属企微号`, visible: true, minWidth: 150, fixed: false},
        {key: 'time', label: `变更时间`, visible: true, minWidth: 150, fixed: false},
      ],
      tableDataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        userName2: null,
        pageSize: 10,
        id: null,//用户id
        userName1: null,

      },
      rules: {
        'name': [
          {required: true, message: '请输入标签名称', trigger: 'blur'}
        ],

      },
      total: 8, // 表格的总条数
    };
  },
  created() {
    // this.getList();
    this.tableDataList = [];
    for (let i = 0; i < 3; i++) {
      let obj = {
        name: '小红',
        label1: '18207418337',
        label2: '18207418337',
        label3: '18207418337',
        label4: '18207418337',
      }
      this.tableDataList.push(obj);
    }
    this.recordDataList = [];
    for (let i = 0; i < 10; i++) {
      let obj = {
        name: '小红',
        label: '18207418337',
         code:'111',
        time:'2012-08-12'
      }
      this.recordDataList.push(obj);
    }
  },
  methods: {
    handerAddGroup() {
      //新增标签组
      this.showAddLabelGroup = true;
    },
    getSelectUser() {
      //选择企微号
      this.showSelectByUser = true;
    },
    getActive(index) {
      this.active = index;
    },
    onSubmit() {

    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.tableDataList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.deptId = undefined;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(val) {
      this.multipleSelection = [];
      if (val && val.length > 0) {
        val.forEach((item) => {
          this.multipleSelection.push(item.id);
        })
        console.log('multipleSelection', this.multipleSelection);
      }
    },
    handerAddCondition() {
      //添加条件
      this.showSelectConsumptionRules = true;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      //删除
      // const userIds = row.userId || this.ids;
      // this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
      //   return delUser(userIds);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // }).catch(() => {
      // });
      this.$msgBox.showMsgBox({
        title: "是否确认删除？",
        content: "该企微号正在执行服务，删除将会使该号从操作中释放，导致部分功能无法正常使用，请谨慎选择。*如该号已加入在线聊天，成功删除后，聊天记录会被一并删除，重新登录后无法恢复。",
      })
        .then(async (val) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleNumberDelete() {
      this.$modal.confirm('确认清空本页黑名单？').then(function () {
        return delUser(userIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });

    },

  }
};
</script>
<style lang="scss" scoped>
.head-big {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  padding-bottom: 0px;
}

.container-big {
  display: flex;
  height: calc(100vh - 150px);
  margin: 12px;
  flex-direction: column;
}

.content-left {
  width: 400px;
}

.formGroup {
  width: 100%;
  padding: 10px 20px;
  margin-bottom: 10px;
  background: #fff;

  .el-form {
    background: #fff;
    border-radius: 8px;
    margin-top: -1px;
    display: flex;

    .el-button {
      margin-right: 10px;
    }

    .el-form-item {
      margin-bottom: 0px;

      ::v-deep .el-form-item__content {
        display: flex;

        .el-input {
          width: 150px;
        }
      }

      .right-big {
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        padding-left: 11px;
        .el-form{
          height: calc(100% - 60px);
          overflow-y: auto;
        }

        > span {
          color: #777;
          width: 89px;
          display: inline-block;
          white-space: nowrap;
        }

        .el-select {
          width: 138px;

          ::v-deep .el-input__inner {
            border: none;
          }
        }

        .el-input {
          width: 138px;

          ::v-deep .el-input__inner {
            border: none;
          }
        }

        ::v-deep .el-date-editor {
          border: none;
        }
      }

    }
  }
}


.header-top {
  height: 46px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;

  .head-title {
    font-size: 14px;
    line-height: 22px;
    margin-right: 10px;

    .example-text {
      color: #2f54eb;
      cursor: pointer;
      margin-left: 8px;;
      font-weight: 400;

      &:hover + .example-modal {
        display: block;
      }
    }

    .example-modal {
      position: fixed;
      left: 0;
      margin-top: 10px;
      display: none;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
      background: #FFFFFF;

      .example-cover {
        height: 600px;
      }
    }
  }
}


.content-big {
  .content-left {
    width: 414px;
    display: flex;
    flex-direction: column;
    height: 100%;

    .content-item {
      background: #fff;
      border-radius: 4px;
      border: 1px solid #e9e9e9;
      cursor: pointer;
      margin: 0px 10px;
      margin-bottom: 10px;

      &.active {
        border: 1px solid #3070ff;
        background: #ebf2ff;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2);
      }

      .content-top {
        display: flex;
        justify-content: space-between;
        olor: rgba(0, 0, 0, .85);
        display: flex;
        align-items: center;
        grid-gap: 8px;
        gap: 8px;
        padding: 12px;
        padding-bottom: 0;

        .title {
          font-size: 14px;
        }

        .mgt {
          font-size: 12px;
          height: 24px;
          display: flex;
          align-items: center;
          padding: 0px 5px;
          border-radius: 5px;


          span {
            margin-right: 5px;
            border-right: 1px solid #eee;
          }
        }
      }

      .label-list {
        color: rgba(0, 0, 0, .45);
        font-size: 12px;
        margin-bottom: 12px;
        padding: 0px 12px;
        padding-top: 5px;
        display: flex;
        justify-content: space-between;

        .red {
          color: red;
        }
      }

      .content-bottom {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: rgba(0, 0, 0, .45);
        padding: 6px 12px;
        border-top: 1px solid #e9e9e9;
      }
    }
  }

  .formGroup {
    display: flex;
  }
}

.content-big {
  display: flex;
  height: 100%;

  .content-right {
    flex: 1;
    background: #fff;
    position: relative;
    //  height: calc(100% - 50px);
  }
}

.moreInfo {
  color: #2d8cf0;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.table-list {
  font-size: 14px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0px 20px;
  border-bottom: 1px solid #eee;

  li {
    cursor: pointer;
    font-weight: 400;
    list-style: none;
    margin: 0px 10px;
    position: relative;
    display: flex;
    height: 44px;
    align-items: center;

    &.active {
      color: #3070ff;

      &:after {
        content: '';
        position: absolute;
        height: 2px;
        background: #3070ff;
        width: 100%;
        bottom: 0px;
        left: 0px;
      }
    }
  }

  .example-modal {
    position: fixed;
    left: 0;
    margin-top: 10px;
    display: none;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    background: #FFFFFF;

    .example-cover {
      height: 600px;
    }
  }
}

.condition {
  display: flex;
  justify-content: center;
}

.labelslectType {
  height: 30px;
  display: flex;
  align-items: center;
  margin: 0px 10px;
}

.condition-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border: 1px solid #eee;
  padding: 0px 10px;
  margin: 0px 10px;

  .labelType {
    color: #3b74ff;
    margin-right: 10px;
  }

  .label-btnBig {
    font-size: 18px;
    margin-left: 10px;

    i {
      margin: 0px 5px;
    }
  }
}

.user-images {
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  padding: 0px 10px;
  color: #888;
  margin-top: 10px;

  .number {
    margin-left: 10px;
  }

  .img-li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 5px;
    overflow: hidden;
    border-radius: 2px;

    img {
      width: 24px;
      height: 24px;
      object-fit: cover;
      margin: 0px 2px;
    }
  }
}

.el-form {
  margin: 0px 10px;
  margin-top: 10px;
}

.footer-btn {
  position: absolute;
  left: 0px;
  right: 0px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-top: 1px solid #eee;
  bottom: 0px;
}

.right-big {
  height: calc(100% - 50px);
  overflow-y: auto;
  position: relative;
}

.formGroup {
  width: 100%;
  padding: 10px 20px;
  margin-bottom: 10px;
  background: #fff;

  .el-form {
    background: #fff;
    border-radius: 8px;
    margin-top: -1px;
    display: flex;

    .el-button {
      margin-right: 10px;
    }

    .el-form-item {
      margin-bottom: 0px;

      ::v-deep .el-form-item__content {
        display: flex;

        .el-input {
          width: 150px;
        }
      }

      .right-big {
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        padding-left: 11px;

        > span {
          color: #777;
          width: 89px;
          display: inline-block;
          white-space: nowrap;
        }

        .el-select {
          width: 138px;

          ::v-deep .el-input__inner {
            border: none;
          }
        }

        .el-input {
          width: 138px;

          ::v-deep .el-input__inner {
            border: none;
          }
        }

        ::v-deep .el-date-editor {
          border: none;
        }
      }

    }
  }
}

.userInfo {
  border-radius: 4px;
  margin: 8px 0;
  cursor: pointer;
  position: relative;
  padding-left: 50px;
  font-size: 14px;
  list-style: none;
  text-align: left;

  img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    left: 0px;
    top: 0px;
    position: absolute;
  }

  .label {
    margin-top: 2px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #f90;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.label-list {
  label {
    font-size: 14px;
    line-height: 1.5715;
    word-wrap: break-word;
    font-weight: 400;
  }

  span {
    margin: 4px 4px 4px 0;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    white-space: nowrap;
    background: #f0f0f0;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    padding: 0px 7px;
    display: inline-block;

  }
}
.recordTalbel {
  margin: 20px;
}
.search {
  display: flex;
  ::v-deep.el-input__inner {
    border-right: none !important;
    border-radius: 4px 0px 0px 0px;
  }
  ::v-deep .el-button--default {
    border-radius: 0px 4px 4px 0px;
    padding: 0px 10px;
  }
}
</style>
